<template>
  <div class="article-item" @click="toDetail(item._id)" v-if="Object.keys(item) !==0">
      <div class="about">
        <h3>{{ item.title }}</h3>
        <el-tag type="info" v-for="(item1, i) in item.tags" :key="i">{{
          item1.name
        }}</el-tag>
        <p>{{ item.description }}</p>
        <div class="time">
          <span>createAt:{{ item.createTime | date }}</span>
          <span>updateAt:{{ item.updateTime | date }}</span>
        </div>
      </div>
      <div class="img">
        <el-image :src="item.titlePicture" style="object-fit: cover"></el-image>
      </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
    props:{
        item:{
            type:Object,
            default(){
                return []
            }
        }
    },
    filters: {
        date(val) {
            return dayjs(val).format("YYYY/MM/DD");
        },
    },
    methods:{
         toDetail(id) {
            // this.$router.push('/articleInfo/'+id)
            this.$router.push(`/articleInfo/${id}`)
        },
    }
}

</script>
<style scoped lang="scss">
@media screen and (min-width: 1200px){
    .article-item:hover {
      cursor: pointer;
      transition: 0.8s;
      box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.2);
      .el-image {
        transition: 0.8s;
        transform: scale(1.05);
      }
    }
    .article-item {
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .about {
        width: 800px;
        margin: 25px;
        p{
          font-size:16px;
        }
        .el-tag {
          margin-left: 10px;
        }
        .time span:nth-child(2) {
          padding-left: 15px;
        }
      }
      .img {
        // width: 500px;
        width: 50%;
        margin-left: 80px;
        .el-image {
          height: 260px;
          // width: 600px;
          margin: 5px 0px 3px 3px;
          border-radius: 3%;
        }
      }
    }
}


@media screen and (max-width: 768px){
    .article-item {
      width: 90%;
      margin: 0 auto;
      border-radius: 3%;
      box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.2);
      background-color: #fff;
      .about {
        margin: 15px;
        p{
          font-size:14px;
        }
        h2 {
          font-size: 18px;
        }
        .el-tag {
          margin-left: 10px;
        }
        .time span:nth-child(2) {
          padding-left: 15px;
        }
      }
      .img {
        .el-image {
          height: 180px;
          border-radius: 3%;
        }
      }
    }
}
</style>